import { useEffect } from "react";
import { Space, List, Card, Avatar } from "antd";
import { Card as SemiCard } from "@douyinfe/semi-ui";
import { useModel, history } from "umi";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";

import { FindMembers } from "../../_graphql/organizations";

const OrganizationMemberInformation = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global");
    const { kuboUrl } = useModel("kubo");
    const { currentOrganizationUuid } = useModel("organization.info");
    const { setCurrentPerson } = useModel("person.info");

    const state = useReactive({
        loading: false,
        members: [],
    });

    const loadOrganizationInformation = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: FindMembers, variables: { organizationUuid: currentOrganizationUuid } });
        state.members = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        currentOrganizationUuid && loadOrganizationInformation();
    }, [currentOrganizationUuid]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 60 - 54 - 2;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>成员信息</span>}
                headerExtraContent={<Space style={{ lineHeight: "32px", fontSize: 14, fontWeight: 600 }}></Space>}
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                size="default"
                bodyStyle={{ padding: 20, height: cardBodyHeight }}
            >
                <List
                    loading={state.loading}
                    grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 6 }}
                    dataSource={state.members}
                    renderItem={(item) => (
                        <List.Item>
                            <Card
                                hoverable
                                size="small"
                                onClick={() => {
                                    setCurrentPerson(item.person.uuid, item.person.realName);
                                    history.replace("/persons/baseinfo");
                                }}
                            >
                                <Card.Meta
                                    avatar={
                                        <Avatar
                                            shape="square"
                                            src={
                                                kuboUrl && item?.person?.avatarHash ? (
                                                    kuboUrl + item.person.avatarHash
                                                ) : (
                                                    <Jdenticon size="40" value={item?.person?.realName} />
                                                )
                                            }
                                            size={40}
                                        />
                                    }
                                    title={item?.person?.realName || ""}
                                    description={item?.person?.phone}
                                />
                            </Card>
                        </List.Item>
                    )}
                />
            </SemiCard>
        </div>
    );
};

export default OrganizationMemberInformation;
